<template>
	<view>
		<view class="top flex align-center">
			<text>提现到</text>
			<radio-group class="block" @change="RadioChange">
				<view class="top-r flex align-center justify-around">
					<view class="flex align-center">
						<radio class='radio' :checked="radio=='A'?true:false" value="A"></radio>
						<text>支付宝</text>
					</view>
					<view class="flex align-center">
						<radio class='radio' :checked="radio=='B'?true:false" value="B"></radio>
						<text>微信</text>
					</view>
					<view class="flex align-center">
						<radio class='radio' :checked="radio=='C'?true:false" value="C"></radio>
						<text>银行卡</text>
					</view>
				</view>
			</radio-group>
		</view>
		<view v-if="radio=='B'||radio=='A'" class="list margin-top">
			<view class="item flex align-center">
				<text>账号</text>
				<input placeholder="提现账号" v-model="alivx_real_amount"/>
			</view>
			<view class="item flex align-center">
				<text>姓名</text>
				<input placeholder="真实姓名" v-model="alivx_real_name"/>
			</view>
		</view>
		<view v-else class="list margin-top">
			<view class="item flex align-center">
				<text>姓名</text>
				<input placeholder="真实姓名" v-model="real_name"/>
			</view>
			<view class="item flex align-center">
				<text>银行卡号</text>
				<input placeholder="您本人的银行卡卡号" v-model="bank_number"/>
			</view>
			<picker @change="PickerChange" :value="index" :range="picker">
				<view class="item flex align-center">
					<text>卡类型</text>
					<view v-if="index>-1">{{picker[index]}}</view>
					<text v-else style='color: #009829;'>选择类型</text>
				</view>
			</picker>
			<!-- <view class="item flex align-center">
				<text>手机号码</text>
				<input placeholder="银行预留手机号码" />
			</view> -->
		</view>
		<view class="tixian flex flex-direction margin-top">
			<view class="title">
				提现金额
			</view>
			<view class="flex align-center">
				<text>￥</text>
				<input v-model="drawAmount"/>
			</view>
			<view class="tixian-bto flex align-center">
				<text>可提现余额：{{user.amount}}</text>
			</view>
		</view>
		
		<view class="btn-con flex align-center justify-center">
			<view @click="showPop" class="btn">提交申请</view>
		</view>
		<view @click="close" v-if="isShowPop" class="popup flex align-center justify-center">
			<view @click.stop class="popup-con flex flex-direction align-center justify-center">
				<text class="lg text-gray cuIcon-roundcheckfill"></text>
				<text>提交成功</text>
				<text>系统将在1个工作日内完成审核</text>
				<view @click="close" class="popbtn">
					我知道了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				user:uni.getStorageSync('user'),
				getBankList:[],
				drawAmount:0,
				bank_number:'',
				bank_name:'',
				real_name:'',
				alivx_real_name:'',
				alivx_real_amount:'',
				isShowPop:false,
				index:-1,
				radio:'A',
				picker: ['建设银行'],
			}
		},
		onLoad() {
			this.loadGetBankList()
		},
		methods: {
			//加载银行卡
			loadGetBankList(){
				api.get({
					url:'Amount/GetBankList',
					data:{
						user_id:this.user.user_id,
						page:1,
						pagesize:15,
						},
					success:data=>{
						console.info('loadGetBankList'+JSON.stringify(data))
						if(data.ErrCode==0){
							this.getBankList = data.Response
							for(var i=0;i<this.getBankList.length;i++){
								this.picker[i] = this.getBankList[i].title
							}
						}
					}
				});	
			},
			//提现到银行卡
			postWithdraw(){
			api.post({
				url:'Amount/PostWithdraw?user_id='+this.user.user_id,
				data:{
					user_id:this.user.user_id,
					amount:this.drawAmount,
					real_name:this.real_name,
					bank_number:this.bank_name,
					bank_name:this.bank_name,
					},
				success:data=>{
					console.info('loadGetBankList'+JSON.stringify(data))
					if(data.ErrCode==0){
						uni.showToast({
							title:'成功'
						})
					}
				}
			});	
			},
			//提现到vx
			postWithdrawWx(){
			api.post({
				url:'Amount/PostWithdrawWeixin?user_id='+this.user.user_id,
				data:{
					user_id:this.user.user_id,
					amount:this.drawAmount,
					real_name:this.alivx_real_name,
					bank_name:this.alivx_real_amount,
					},
				success:data=>{
					console.info('loadGetBankList'+JSON.stringify(data))
					if(data.ErrCode==0){
						uni.showToast({
							title:'成功'
						})
					}
				}
			});	
			},
			//提现到vx
			postWithdrawAli(){
			api.post({
				url:'Amount/PostWithdrawAlipay?user_id='+this.user.user_id,
				data:{
					user_id:this.user.user_id,
					amount:this.drawAmount,
					real_name:this.alivx_real_name,
					bank_name:this.alivx_real_amount,
					},
				success:data=>{
					console.info('loadGetBankList'+JSON.stringify(data))
					if(data.ErrCode==0){
						uni.showToast({
							title:'成功'
						})
					}
				}
			});	
			},
			showPop(){
				if(this.radio){
					if(this.drawAmount<=0){
						uni.showToast({
							title:'请输入金额'
						})
						return;
					}
					if(this.radio =='A'){
						if(this.alivx_real_amount ==''){
							uni.showToast({
								title:'请输入账号'
							})
							return;
						}
						if(this.alivx_real_name ==''){
							uni.showToast({
								title:'请输入姓名'
							})
							return;
						}
						this.postWithdrawAli()
						this.isShowPop=true
					}else if(this.radio =='B'){
						if(this.alivx_real_amount ==''){
							uni.showToast({
								title:'请输入账号'
							})
							return;
						}
						if(this.alivx_real_name ==''){
							uni.showToast({
								title:'请输入姓名'
							})
							return;
						}
						this.postWithdrawWx()
						this.isShowPop=true
					}else if(this.radio =='C'){
						if(this.real_name ==''){
							uni.showToast({
								title:'请输入姓名'
							})
							return;
						}
						if(this.bank_name ==''){
							uni.showToast({
								title:'请输入银行名称'
							})
							return;
						}
						if(this.bank_number ==''){
							uni.showToast({
								title:'请输入卡号'
							})
							return;
						}
						this.postWithdraw()
						this.isShowPop=true
					}
				}else{
					uni.showToast({
						title:'请选择提现到'
					})
					return;
				}
			},
			close(){
				this.isShowPop=false
			},
			PickerChange(e) {
				this.index = e.detail.value
				console.log(this.picker[this.index])
				this.bank_name = this.picker[this.index]
			},
			RadioChange(e) {
				this.radio = e.detail.value
				console.log(this.radio)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popbtn{
		margin-top: 60upx;
		width: 330upx;
		font-size: 28upx;
			height: 80upx;
			background-color: $btn-bground;
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
	}
	.popup-con>text:nth-child(1){
		color: $btn-bground;
		font-size: 100upx;
	}
	.popup-con>text:nth-child(2){
		margin-top: 30upx;
		font-size: 30upx;
			color: #333333;
	}
	.popup-con>text:nth-child(3){
		font-size: 30upx;
		margin-top: 10upx;
			color: #333333;
	}
	.popup{
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.popup-con{
		width: 600upx;
			height: 450upx;
			background-color: #ffffff;
			border-radius: 10upx;
	}
	.btn-con{
		width: 100%;
		height: 100upx;
		margin-top: 60upx;
	}
		.btn{
			text-align: center;
			width: 560upx;
			line-height: 70upx;
				height: 70upx;
				background-color: $btn-bground;
				border-radius: 35upx;
				color: #fff;
				font-size: 28upx;
		}
	.tixian>view{
		height: 75upx;
	}
	.tixian-bto{
		width: 100%;
		height: 75upx;
		border-top: 1upx solid #ddd;
	}
	.tixian-bto>text{
			font-size: 28upx;
			color: #000000;
	}
	.tixian{
		padding: 30upx 24upx 0 24upx;
		box-sizing: border-box;
		background-color: #fff;
		
	}
	.title{
			font-size: 28upx;
			color: #000000;
	}
	.item>text{
		width: 180upx;
	}
	.item{
		padding-left: 24upx;
		width: 100%;
		height: 86upx;
		background-color: #fff;
		border-bottom: 1upx;
	}
	.top-r>view>text{
		margin-left: 20upx;
	}
	.top-r{
		width: 600upx;
		
	}
	.top{
		margin-top: 20upx;
		padding-left: 24upx;
		width: 100%;
		height: 86upx;
		background-color: #ffffff;
	}

</style>
